﻿@inherits AdminCompontentBase

<DefaultSheetDialog Value="Visible" ValueChanged=UpdateVisible Title="@T("Add Staff")">
    <MForm Model="Staff" EnableValidation EnableI18n @ref="_mForm">
        <MStepper Value="Step">
            <MStepperItems>
                <MStepperContent Step="1">
                    <AutoHeight AutoClass="d-flex">
                        <AutoHeightContent>
                            @if (!_isBindUser.HasValue)
                            {
                                <div class="d-flex justify-center align-center full-width full-height" style="gap:100px">
                                    <div>
                                        <MHover Context="hoverContext">
                                            <MCard @attributes="hoverContext.Attrs" Height="480" Width="480" Class="@($"{_cardCss} {(hoverContext.Hover ? "primary" : "fill-background")}")" OnClick="()=>_isBindUser=true">
                                                <SIcon Size="hoverContext.Hover?54:36" Color="@(hoverContext.Hover?"fill":"emphasis2")">
                                                    mdi-account-check
                                                </SIcon>
                                                <div class="h6 @(hoverContext.Hover?"pt-10 fill--text":"pt-12 regular--text")">
                                                    @T("BindUser")
                                                </div>
                                            </MCard>
                                        </MHover>
                                    </div>
                                    <div>
                                        <MHover Context="hoverContext">
                                            <MCard @attributes="hoverContext.Attrs" Height="480" Width="480" Class="@($"{_cardCss} {(hoverContext.Hover ? "primary" : "fill-background")}")" OnClick="()=>_isBindUser=false">
                                                <SIcon Size="hoverContext.Hover?54:36" Color="@(hoverContext.Hover?"fill":"emphasis2")">
                                                    mdi-account-plus-outline
                                                </SIcon>
                                                <div class="h6 @(hoverContext.Hover?"pt-10 fill--text":"pt-12 regular--text")">
                                                    @T("AddUser")
                                                </div>
                                            </MCard>
                                        </MHover>
                                    </div>
                                </div>
                            }
                            else if (_isBindUser == false)
                            {
                                <div class="ma-auto text-center">
                                    <ButtonGroup @bind-Value="Staff.Gender" StyleType=StyleTypes.Toggle TValue="GenderTypes" />
                                    <br />
                                    <div class="mt-12">
                                        <DefaultChangeImage @bind-Value="Staff.Avatar" Gender="Staff.Gender" WhenFileChangeUpload />
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="ma-auto text-center">
                                    <SUserAutoComplete Small @bind-Value="Staff.UserId" OnSelectedItemUpdate="SelectUser" />
                                </div>
                            }
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex">
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="()=>Step=2">@T("Next step")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
                <MStepperContent Step="2">
                    <AutoHeight Overflow AutoClass="mt-6">
                        <HeaderContent>
                            <div class="d-flex mt-10">
                                <div class="mx-auto text-center">
                                    <MAvatar Size=80>
                                        <img src="@Staff.Avatar" />
                                    </MAvatar>
                                    <SNameTextField @bind-Value="Staff.DisplayName" Placeholder="@T("Give him a nickname!")" style="width:212px;" />
                                </div>
                            </div>
                        </HeaderContent>
                        <AutoHeightContent>
                            <DefaultTitle Class="mb-6">@T("BasicInformation")</DefaultTitle>
                            <MRow>
                                <MCol>
                                    <STextField @bind-Value="Staff.Name" Label="@T("Name")" />
                                </MCol>
                                <MCol>
                                    <STextField Required @bind-Value="Staff.PhoneNumber" Label="@T("PhoneNumber")" />
                                </MCol>
                            </MRow>
                            <MRow Class="mt-4">
                                <MCol>
                                    <STextField @bind-Value="Staff.Email" Label="@T("Email")" />
                                </MCol>
                                <MCol>
                                    <EnumSelect @bind-Value=Staff.StaffType TValue="StaffTypes" Clearable=false Label="@T("StaffType")" />
                                </MCol>
                            </MRow>
                            <MRow Class="mt-4">
                                <MCol>
                                    <TeamRoleSelect @bind-Value="Staff.Teams" />
                                </MCol>
                                <MCol>
                                    <STextField @bind-Value="Staff.IdCard" Label="@T("IdCard")" />
                                </MCol>
                            </MRow>
                            <MRow Class="mt-4">
                                <MCol>
                                    <STextField @bind-Value="Staff.Address.Address" Label="@T("Address")" />
                                </MCol>
                                <MCol>
                                    <DepartmenCascader @bind-Value="Staff.DepartmentId" />
                                </MCol>
                            </MRow>
                            <MRow Class="mt-4">
                                <MCol>
                                    <STextField @bind-Value="Staff.JobNumber" Required Label="@T("JobNumber")" />
                                </MCol>
                                <MCol>
                                    <PositionSelect @bind-Value="Staff.Position" />
                                </MCol>
                            </MRow>
                            <MRow Class="mt-4">
                                <MCol>
                                    <STextField @bind-Value="@Staff.Password" Required DebounceInterval=500 Label="@T("Password")" Action="SetDefaultPwdAction" />
                                </MCol>
                            </MRow>
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex mt-6">
                                <EnableSwitch Class="ml-1" @bind-Value="Staff.Enabled" />
                                <MSpacer />
                                <SButton Medium Outlined OnClick="()=>Step=1">@T("Previous step")</SButton>
                                <SButton Medium Class="ml-6" OnClick="async() => await AddStaffAsync(context)">@T("Submit")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
            </MStepperItems>
        </MStepper>
    </MForm>
</DefaultSheetDialog>
